<template>
    <!-- 库存单据查询 -->
    <div class="app-container">
    <el-row :gutter="20">
        <el-col :span="24" :xs="24">
        <el-form  :inline="true"
                    ref="queryRef"
                    :model="queryParams"
                    label-width="100px">
            <el-form-item label="系统单号" prop="systematicReceipt">
                <el-input
                v-model="queryParams.systematicReceipt"
                placeholder="请输入"
                style="width: 200px;"
                clearable/>
            </el-form-item>
            <el-form-item label="原始单号" prop="originalReceipt">
                <el-input
                    v-model="queryParams.originalReceipt"
                    placeholder="请输入"
                    style="width: 200px;"
                    clearable/>
            </el-form-item>
            <el-form-item label="单据类型" prop="receiptType">
                <el-select
                    v-model="queryParams.receiptType"
                    placeholder="单据类型"
                    clearable
                    style="width: 200px;">
                    <el-option
                        v-for="dict in receipt_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="单据状态" prop="receiptStatus">
            <el-select
                v-model="queryParams.receiptStatus"
                placeholder="单据状态"
                clearable
                style="width: 200px;">
                <el-option
                    v-for="dict in receipt_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
            </el-select>
            </el-form-item>
            <el-form-item label="调入仓库" prop="warehousingIds">
            <el-select style="width: 200px;" v-model="queryParams.warehousingIds" placeholder="请选择">
                <el-option
                    v-for="item in warehouseOptions"
                    :key="item.warehouseId"
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="调出仓库" prop="retrievalIds">
            <el-select style="width: 200px;" v-model="queryParams.retrievalIds" placeholder="请选择">
                <el-option
                    v-for="item in warehouseOptions"
                    :key="item.warehouseId"
                    :label="item.warehouseName"
                    :value="item.warehouseId"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="经手人" prop="userIds">
            <el-select style="width: 200px;" v-model="queryParams.userIds" placeholder="请选择">
                <el-option
                    v-for="item in userOptions"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="供应商" prop="supplierIds">
                <el-select style="width: 200px;" v-model="queryParams.supplierIds" placeholder="请选择">
                <el-option
                    v-for="item in supplierOptions"
                    :key="item.supplierId"
                    :label="item.supplierName"
                    :value="item.supplierId"
                ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户" prop="customerIds">
            <el-select style="width: 200px;" v-model="queryParams.customerIds" placeholder="请选择">
                <el-option
                    v-for="item in customerOptions"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId"
                ></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="货品编号" prop="productCode">
            <el-input
                v-model="queryParams.productCode"
                placeholder="请输入货品编号"
                style="width: 200px;"/>
            </el-form-item>
            <el-form-item label="货品名称" prop="productName">
            <el-input
                v-model="queryParams.productName"
                placeholder="请输入货品名称"
                style="width: 200px;"/>
            </el-form-item>
            <el-form-item label="创建时间" style="width: 388px;">
            <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                type="primary"
                icon="Search"
                @click="handleQuery"
                v-hasPermi="['system:purchase:PurchaseOrderQuery']"
                >查询</el-button>
                <el-button
                type="success"
                icon="Search"
                @click="handleDetailQuery"
                v-hasPermi="['system:purchase:list']"
                >明细查询</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
        <el-col :span="21">
            <span>查询结果</span>
        </el-col>
        <el-col :span="1.5">
            <el-button
            v-if="purchaseHead"
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['system:purchase:purchaseOrderExport']"
            >导出</el-button>
        </el-col>
        <el-col :span="1.5">
            <el-button
            v-if="purchaseDetail"
            type="danger"
            plain
            icon="Download"
            @click="handleDetailExport"
            v-hasPermi="['system:purchase:purchaseDetailOrderExport']"
            >明细导出</el-button>
        </el-col>
        </el-row>

        <!-- 头表数据 -->
        <el-table
        border
        v-if="purchaseHead"
        v-loading="loading"
        :data="headReceiptList">
            <el-table-column label="序号" align="center" type="index" width="60" />
            <el-table-column label="系统单号" align="center" prop="systematicReceipt" width="180"/>
            <el-table-column label="原始单号" align="center" prop="originalReceipt"/>
            <el-table-column label="单据类型" align="center" prop="receiptType">
                <template #default="scope">
                <dict-tag :options="receipt_type" :value="scope.row.receiptType" />
                </template>
            </el-table-column>
            <el-table-column label="单据状态" align="center" prop="receiptStatus">
                <template #default="scope">
                <dict-tag :options="receipt_status" :value="scope.row.receiptStatus" />
                </template>
            </el-table-column>
            <el-table-column label="发生日期" align="center" prop="invoiceDate"/>
            <el-table-column label="调入仓库" align="center" prop="warehousing.warehousingName"/>
            <el-table-column label="调出仓库" align="center" prop="retrieval.retrievalName"/>
            <el-table-column label="经手人" align="center" prop="sysUser.userName"/>
            <el-table-column label="供应商" align="center" prop="supplier.supplierName"/>
            <el-table-column label="客户" align="center" prop="customer.customerName"/>
            <el-table-column label="订单号" align="center" prop="planReceipt"/>
            <el-table-column label="备注" align="center" prop="receiptNotes" :show-overflow-tooltip="true"/>
            <el-table-column label="创建者" align="center" prop="createBy"/>
            <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="更新者" align="center" prop="updateBy"/>
            <el-table-column label="更新时间" align="center" prop="updateTime" :show-overflow-tooltip="true">
            <template #default="scope">
                <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120" class-name="small-padding fixed-width">
                <template #default="scope">
                <el-tooltip content="打印">
                    <el-button
                    link
                    type="primary"
                    icon="Printer"
                    @click="printOut(scope.row)"
                    ></el-button>
                </el-tooltip>
                <el-tooltip content="修改" placement="top">
                    <el-button
                    link
                    type="primary"
                    icon="Edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['system:purchaseOrder:update']"
                    ></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                    <el-button
                    link
                    type="primary"
                    icon="Delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['baseDate:supplier:remove']"
                    ></el-button>
                </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <pagination
            v-if="purchaseHead"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"/>
        <!-- 明细表数据 -->
        <el-table
        id="printTest"
        border
        v-if="purchaseDetail"
        v-loading="loading"
        :data="detailReceiptList">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="货品编号" align="center" prop="product.productCode"/>
        <el-table-column label="货品名称" align="center" prop="product.productName"/>
        <el-table-column label="货品类型" align="center" prop="type.productTypeName"/>
        <el-table-column label="规格" align="center" prop="product.productSpecifications"/>
        <el-table-column label="单位" align="center" prop="product.measureUnit"/>
        <el-table-column label="产地" align="center" prop="product.producer"/>
        <el-table-column label="数量" align="center" prop="planQuantity"/>
        <el-table-column label="单价" align="center" prop="univalence"/>
        <el-table-column label="折扣" align="center" prop="discount"/>
        <el-table-column label="金额" align="center" prop="money"/>
        <el-table-column label="成本" align="center" prop="cost"/>
        <el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
        </el-table>
        <!-- 分页组件 -->
        <pagination
            v-if="purchaseDetail"
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getDetailList"/>
        </el-col>
    </el-row>

    <!-- 打印对话框 -->
    <!-- <el-dialog
        :title="title"
        :visible.sync="printFlag"
        v-model="openPrintSelect"
        width="70%"
        append-to-body
        :close-on-click-modal ="false"
        :show-close="false">
        <el-button type="danger" plain @click="printExcel">预览</el-button>
        <el-button type="success" plain v-print="'#printExcel'" ref="">打印</el-button>
        <el-button type="warning" plain @click="printSelectCancel">取 消</el-button>
        <div ref="printExcel" id="printExcel" ></div>
    </el-dialog> -->
    </div>
</template>

<script setup name="InventoryDocumentQuery">
import { useRouter } from 'vue-router';
import { listWarehouse } from '@/api/basedate/warehouse';
import { listsUser } from '@/api/system/user';
import { listsSupplier } from '@/api/basedate/supplier';
import { listsCustomer } from '@/api/basedate/customer';
import { headReceiptQuery, detailReceiptQuery, getHeadReceipt, delInventoryReceipt } from '@/api/system/inventory';

const { proxy } = getCurrentInstance();
const { receipt_type } = proxy.useDict("receipt_type");
const { receipt_status } = proxy.useDict("receipt_status");

// 查询结果表
const headReceiptList = ref([]);
const detailReceiptList = ref([]);
const userOptions = ref(undefined);
const supplierOptions = ref(undefined);
const customerOptions = ref(undefined);
const warehouseOptions = ref(undefined);
const fileOptions = ref(undefined);
// 查询表展示
const purchaseHead = ref(true);
// 查询明细表展示
const purchaseDetail = ref(false);
// 打印窗口开关
const openPrintSelect = ref(false);
// 加载
const loading = ref(true);
// 总条数
const total = ref(0);
// 窗口标题
const title = ref("");
// 数据范围
const dateRange = ref([]);
// 打印类型
const printFlag = ref(false);
const router = useRouter();

const data = reactive({
    form: {},
    fileForm: {},
    queryParams: {
    pageNum: 1,
    pageSize: 10,
    systematicReceipt: undefined,
    originalReceipt: undefined,
    receiptType: undefined,
    receiptStatus: undefined,
    warehousingIds: undefined,
    retrievalIds: undefined,
    userIds: undefined,
    supplierIds: undefined,
    customerIds: undefined,
    productCode: undefined,
    productName: undefined,
    },
    rules: {
    fileId: [{ required: true, message: "必须选择打印模板", trigger: "blur" }],
    },
});

const { queryParams, fileForm, form, rules } = toRefs(data);

function Options() {
    listWarehouse().then(response => {
        warehouseOptions.value = response.rows;
    });
    listsSupplier().then(response => {
        supplierOptions.value = response.rows;
    });
    listsCustomer().then(response => {
        customerOptions.value = response.rows;
    });
    listsUser().then(response => {
        userOptions.value = response.rows;
    });
};
/** 查询库存头单列表 */
function getList() {
    loading.value = true;
    headReceiptQuery(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    headReceiptList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    });
};
/** 查询库存明细列表 */
function getDetailList() {
    loading.value = true;
    detailReceiptQuery(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    detailReceiptList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    });
};
/** 查询按钮操作 */
function handleQuery() {
    purchaseHead.value = true;
    purchaseDetail.value = false;
    queryParams.value.pageNum = 1;
    getList();
};
/** 明细查询按钮操作 */
function handleDetailQuery() {
    purchaseHead.value = false;
    purchaseDetail.value = true;
    queryParams.value.pageNum = 1;
    getDetailList();
};
/** 重置按钮操作 */
function resetQuery() {
    dateRange.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
};
/** 重置操作表单 */
function reset() {
    form.value = {
    originalReceipt: undefined,
    receiptType: undefined,
    warehousingIds: undefined,
    retrievalIds: undefined,
    customerIds: undefined,
    productCode: undefined,
    productName: undefined,
    fileId: undefined,
    };
    proxy.resetForm("queryRef");
    purchaseHead.value = true;
    purchaseDetail.value = false;
};
/** 确定模板按钮 */
function printOut(row) {
    proxy.$modal.msgWarning('打印模块开发中，尽情期待！')
    // const systematicReceipt = row.systematicReceipt;
    // const originalReceipt = row.originalReceipt;
    // getHeadReceipt(systematicReceipt).then(response => {
    // form.value = response.data;
    // const fileName = response.data.file.fileName;
    // console.log("11",response.data.file);
    // openPrintSelect.value = true;
    // title.value = "正在使用打印模板文件，" + "打印单号为" + originalReceipt + "的采购单";
    // });
};
/** 打印窗口取消按钮 */
function printSelectCancel() {
    openPrintSelect.value = false;
};
/** 修改按钮操作 */
function handleUpdate(row) {
    const systematicReceipt = row.systematicReceipt;
    const receiptType = row.receiptType;
    if (receiptType == 1){
    router.push({path: '/procure/WarehouseReceipt', query: {systematicReceipt}})
    } else if (receiptType == 2){
    router.push({path: '/procure/RetreatWarehouse', query: {systematicReceipt}})
    } else if (receiptType == 3){
    router.push({path: '/sales/salesOutbound', query: {systematicReceipt}})
    } else if (receiptType == 4){
    router.push({path: '/sales/salesRetreat', query: {systematicReceipt}})
    } else if (receiptType == 5){
    router.push({path: '/inventory/storageOther', query: {systematicReceipt}})
    } else if (receiptType == 6){
    router.push({path: '/inventory/outboundOther', query: {systematicReceipt}})
    } else if (receiptType == 7){
    router.push({path: '/inventory/InventoryTransfer', query: {systematicReceipt}})
    } else if (receiptType == 8){
    router.push({path: '/inventory/InventoryCounting', query: {systematicReceipt}})
    }

};
/** 删除按钮操作 */
function handleDelete(row) {
    const systematicReceipt = row.systematicReceipt;
    getHeadReceipt(systematicReceipt).then(response => {
    const details = response.data.detail;
    proxy.$modal.confirm('确认要删除编号为' + systematicReceipt + '的单据?').then(function () {
        return delInventoryReceipt(details);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
    })
};
/** 导出按钮操作 */
function handleExport() {
    proxy.download("system/inventory/headReceiptExport", {
    ...queryParams.value,
    }, `单据表_${new Date().getTime()}.xlsx`);
};
/** 明细导出按钮操作 */
function handleDetailExport() {
    proxy.download("system/inventory/detailReceiptExport", {
    ...queryParams.value,
    }, `单据明细表_${new Date().getTime()}.xlsx`);
};
function printExcel(){
    // printFlag.value = true;
    // //这个只是个get方法获取后台的数据
    // TestFile().then(rep =>{
    // const printExcel = document.getElementById('printExcel');
    // printExcel.innerHTML = null;
    // // this.$refs.printExcel.innerHTML = null;
    // let pageStyle = `<style type="text/css">` +
    //                 "@media print" +
    //                 "{" +
    //                 "    table { page-break-after:auto }" +
    //                 "    tr    { page-break-inside:avoid; page-break-after:auto }" +
    //                 "    td    { page-break-inside:avoid; page-break-after:auto }" +
    //                 "    thead { display:table-header-group }" +
    //                 "    tfoot { display:table-footer-group }" +
    //                 "}";
    // let s = rep.toString().replace(`<style type="text/css">`,pageStyle)
    //     .replace(`<table cellspacing="0">`,`<table cellspacing="0" style="margin:0 auto">`);
    // printExcel.innerHTML = s;
    // // this.$refs.printExcel.innerHTML = s;
    // })
};
getList();
Options();
</script>